<template>
	<div class="adminMain" v-loading="load.load">
		<a class="backPage" href="/user/index">返回</a>
		<el-form class="form" label-position="top" v-if="info">
			<el-row :gutter="18">
				<el-col :span="2">
					<div class="grid-content bg-purple">
						<el-form-item label="头像">
							<el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'avatar')" accept="image/png,image/jpeg">
								<img v-if="info" :src="info.avatar" onerror="javascript:this.src = '/static/img/a3o.png'" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="昵称">
							<el-input v-model="info.nickname"></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="简介">
							<el-input></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="手机号码">
							<el-input v-model="info.mobile"></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="音乐试用次数">
							<el-input></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="是否公开TA歌曲">
							<el-switch :value="true"></el-switch>
						</el-form-item>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="18">
				<el-col :span="18">
					<div class="grid-content bg-purple">
						<el-button type="primary" @click="savePost">立即保存</el-button>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<div class="pushUnVip" @click="pushUnVip('show')">加减他的会员</div>
					</div>
				</el-col>
			</el-row>
		</el-form>
		<div class="basicInfo" v-if="info">
			<el-form class="form" label-position="top">
				<el-row :gutter="25">
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="用户ID">
								{{ info.id }}
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="累计消费">
								<font color="#F30">￥{{ info.total_money }}</font>
								<a :href="`/index/order?keyword=${id}&field=user_id`" target="_blank" class="rechargeBtn">订单</a>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="累计使用">
								0次
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="会员资格">
								到期：2024/05/30
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="注册方式">
								{{ info.register_source || "-" }}
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="注册时间">
								{{ info.created_at || "-" }}
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="注册渠道">
								{{ info.channel || "-" }}
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="注册IP">
								{{ info.register_ip || "-" }}
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="登陆权限">
								{{ info.status ? "正常" : "封禁" }}
								<i v-if="info.status" class="rechargeBtn" @click="btnFunction('show')">封禁</i>
								<i v-else class="rechargeBtn unbind" @click="btnFunction('show')">解禁</i>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="使用记录">
								<a class="color" target="_blank" :href="`/use/index?keyword=${id}&field=user_id`">查看</a>
							</el-form-item>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>
		
		<!-- 封禁弹窗 -->
		<el-dialog title="提示" :visible.sync="ban.show" width="550px">
			<el-form label-position="top" v-if="ban.data">
				<el-form-item label="结束时间(如若想解封,则输入比现在时间更小的)">
					<el-date-picker
					    type="datetime"
						class="dateTime"
						format="yyyy-MM-dd HH:mm:ss"
						value-format="yyyy-MM-dd HH:mm:ss"
					    placeholder="选择日期时间"
						v-model="ban.data.prohibit_time"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="原因">
					<el-input type="textarea" :rows="3" v-model="ban.data.prohibit_reason"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="ban.show = false;">取 消</el-button>
				<el-button type="primary" @click="btnFunction('post')" :loading="ban.load.load">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 加减用户会员套餐 -->
		<el-dialog title="提示" :visible.sync="pushUn.show" width="550px">
			<template v-if="pushUn.data">
				<el-radio-group v-model="pushUn.data.type" style="margin-bottom: 30px;">
				    <el-radio-button label="push">添加会员</el-radio-button>
				    <el-radio-button label="un">扣除会员</el-radio-button>
				</el-radio-group>
				<el-form label-position="top">
					<el-form-item label="天数">
						<el-input v-model="pushUn.data.day"></el-input>
					</el-form-item>
				</el-form>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pushUn.show = false;">取 消</el-button>
				<el-button type="primary" @click="pushUnVip('post')" :loading="pushUn.load.load">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 是否处于加载中
				load: { load: false },
				
				// id
				id: this.$route.query.id || "",
				
				// 基本信息
				info: null,
				
				// 封禁弹窗
				ban:{
					show: false,
					load: {load:false},
					data: null,
				},
				
				// 加减会员弹窗
				pushUn:{
					show: false,
					load: {load:false},
					data: null,
				},
				
			};
		},
		methods: {
			
			// 上传文件
			fileUpload(res, key){
				let _this = this;
				_this.app.uploadFile({ file: res.file, type: "admin", load: _this.load }).then((res) => {
					_this.info[key] = res.data.url;
				});
			},
			
			// 封禁
			btnFunction(type){
				let _this = this;
				if(type == "show"){
					_this.ban.data = {
						prohibit_time: _this.info && _this.info.prohibit_time ? _this.info.prohibit_time : "",
						prohibit_reason: _this.info && _this.info.prohibit_reason ? _this.info.prohibit_reason : "",
					};
					_this.ban.show = true;
				}else if(type == "post"){
					if(_this.ban.data.prohibit_time == ""){
						_this.$notify.info({
							title: "提示",
							message: "请选择时间"
						});
						return;
					}
					if(_this.ban.data.prohibit_reason == ""){
						_this.$notify.info({
							title: "提示",
							message: "请输入原因"
						});
						return;
					}
					_this.info.prohibit_time = _this.ban.data.prohibit_time;
					_this.info.prohibit_reason = _this.ban.data.prohibit_reason;
					_this.savePost();
				}
			},
			
			// 保存数据
			savePost(){
				let _this = this;
				_this.app.ajax({
					url: "/admin/customer/update",
					method: "POST",
					load: _this.load,
					data: _this.info,
					success(res){
						_this.getData();
						_this.ban.show = false;
						_this.$notify({title: "提示",message: res.msg, type: "success"});
					}
				});
			},
			
			// 获取数据
			getData(){
				let _this = this;
				_this.app.ajax({
					url: "/admin/customer/detail",
					method: "POST",
					load: _this.load,
					data: {
						id: _this.id,
					},
					success(res){
						_this.info = res.data;
					}
				});
			},
			
			// 加减用户会员套餐
			pushUnVip(type){
				let _this = this;
				if(type == "show"){
					_this.pushUn.data = {
						type: "push",
						user_id: _this.id,
						day: "",
					};
					_this.pushUn.show = true;
				}else if(type == "post"){
					if(_this.pushUn.data.day === ""){
						_this.$notify.info({ title: "提示", message: "请输入天数" });
						return;
					}
					_this.app.ajax({
						url: _this.pushUn.data.type === "push" ? "/admin/vip/open" : "/admin/vip/close",
						method: "POST",
						data: _this.pushUn.data,
						load: _this.pushUn.load,
						success(res){
							_this.$notify.success({ title: "提示", message: res.msg });
							_this.getData();
							_this.pushUn.show = false;
						}
					});
				}
			},
			
		},
		mounted(){
			this.getData();
		}
	};
</script>

<style lang="scss" scoped>
	.adminMain{
		min-height: 400px;
		.form{
			margin-top: 20px;
			.avatar-uploader {
				>>>.el-upload {
					$width: 40px;
					display: block;
					width: $width;
					height: $width;
					.avatar-uploader-icon {
						font-size: 18px;
						border: 1px dashed #d9d9d9;
						border-radius: 4px;
						color: #8c939d;
						width: $width;
						height: $width;
						line-height: $width - 2px;
						text-align: center;
						display: block;
					}
					.avatar {
						width: $width;
						height: $width;
						display: block;
						border-radius: 4px;
					}
				}
			}
			& >>> .el-form-item__content {
				height: 40px;
			}
		}
		.basicInfo {
			margin-top: 50px;
		}
		.pushUnVip{
			text-align: right;
			font-size: 13px;
			color: $background;
			cursor: pointer;
		}
	}
	.userLog{
		.item{
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 12px;
			margin-bottom: 15px;
			&:nth-last-child(1){
				margin-bottom: 0;
			}
			.left{
				color: #767676;
			}
			.right{
				color: #333;
				margin-left: 12px;
			}
		}
	}
</style>